<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="12">
        <span class="spn">万方ID：</span>
        <el-input v-model="hunt.wanfangId" class="handle-input mr10"></el-input>
      </el-col>
      <el-col :span="12">
        <span class="spn">HcpID：</span>
        <el-input v-model="hunt.hcpId" class="handle-input mr10"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <span class="spn">HcoID：</span>
        <el-input v-model="hunt.hcoId" class="handle-input mr10"></el-input>
      </el-col>
      <el-col :span="12">
        <span class="spn">医生名字：</span>
        <el-input v-model="hunt.hcpName" class="handle-input mr10"></el-input>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-button type="primary" @click="search()">搜索</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="loading"
      onselectstart="return false"
      :data="tableData"
      border>
      <el-table-column label="时间" prop="year" width="60" align="center"></el-table-column>
      <el-table-column label="论文名">
        <template slot-scope="scope">
          <a :href="scope.row.url"
             target="_blank"
             class="buttonText">{{scope.row.title}}</a>
        </template>
      </el-table-column>
      <el-table-column label="作者" prop="hcpName" width="100" align="center"></el-table-column>
      <el-table-column label="关键字" prop="keyWords">
        <template slot-scope="scope">
          <span v-for="keyWords in scope.row.keyWords">{{keyWords}}，</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        /*搜索*/
        hunt: {
          wanfangId: '',
          hcpId: '',
          hcoId: '',
          hcpName: '',
        },
        /*数据*/
        tableData: [],
        /*加载*/
        loading: false,
      }
    },
    methods: {
      /*搜索*/
      search() {
        if (this.excludeSpecial(this.hunt.wanfangId).length > 0 && this.excludeSpecial(this.hunt.hcpId).length > 0 && this.excludeSpecial(this.hunt.hcoId).length > 0 && this.excludeSpecial(this.hunt.hcpName).length > 0) {
          this.loading = true;
          this.Post(this.$com.GXUrl, '/hcpmdm/hcp_update_info', this.hunt)
        } else {
          this.$message.warning('不能有空缺字段!');
        }
      },
      Post(Url, Port, data) {
        let _this = this;
        this.$axios({
          method: 'POST',
          headers: {'Content-Type': 'application/json;charset=UTF-8'},
          url: Url + Port,
          data: JSON.stringify(data),
        }).then((res) => {
          if (res.data.result) {
            this.loading = false;
            _this.tableData = res.data.result
          }
        })
      },
      /*去除非法字符*/
      excludeSpecial(s) {
        s = s.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\w]/g, '');
        return s;
      }
    },
  }
</script>

<style scoped>
  .container {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  .spn {
    width: 110px;
    font-weight: 800;
    font-size: 18px;
    display: inline-block;
    margin-bottom: 20px;
  }

  .handle-input {
    width: 300px;
    display: inline-block;
  }

  .el-button {
    width: 100px;
  }

  .el-table {
    margin-top: 20px;
    width: 100%
  }
</style>
